<template>
  <Layout desc="柯里化和组合函数案例">
    <div class="flex gap-5 mt-40">
      <el-card class="w-100">
        <template #header>
          <div>柯里化 curry</div>
        </template>
        <div class="flex gap-5">
          <div>curriedGetSum(1)(2)(3)</div>
          <div>{{ curriedGetSum(1)(2)(3) }}</div>
        </div>
        <div class="flex gap-5">
          <div>curriedGetSum(1)(2, 3)</div>
          <div>{{ curriedGetSum(1)(2, 3) }}</div>
        </div>
        <div class="flex gap-5">
          <div>curriedGetSum(1, 2)(3)</div>
          <div>{{ curriedGetSum(1, 2)(3) }}</div>
        </div>
      </el-card>

      <el-card class="w-100">
        <template #header>
          <div>组合函数 compose</div>
        </template>
        <div>['one', 'two', 'three']</div>

        <div class="flex gap-5 mt-5">
          <div>compose(reverse)</div>
          <div>
            {{ compose(reverse)(['one', 'two', 'three']) }}
          </div>
        </div>

        <div class="flex gap-5">
          <div>compose(reverse, first)</div>
          <div>
            {{ compose(reverse, first)(['one', 'two', 'three']) }}
          </div>
        </div>

        <div class="flex gap-5">
          <div>compose(reverse, first, toUpper)</div>
          <div>
            {{ compose(reverse, first, toUpper)(['one', 'two', 'three']) }}
          </div>
        </div>
      </el-card>
    </div>
  </Layout>
</template>

<script setup lang="ts">
import { curry } from '@/utils/curry'
import { compose } from '@/utils/compose'

const getSum = (a: number, b: number, c: number) => {
  return a + b + c
}
const curriedGetSum = curry(getSum)
// curriedGetSum(1)(2, 3)

const reverse = (arr: string[]) => arr.reverse()
const first = (arr: string[]) => arr[0]
const toUpper = (s: string) => s.toUpperCase()
// const f = compose(reverse, first, toUpper)
// f(['one', 'two', 'three'])
</script>

<style scoped lang="scss"></style>
